/**
 * Created by ziyu on 17/3/7.
 */
import React from 'react'
import Styles from './Index.less'
import SearchStyle from '../../common/less/search.less'
import {Button, Col, message, Popconfirm, Spin} from 'antd'
import {exportFile, fetchPost} from '../../../utils/request'
import List from './List'
import Search from '../../common/components/Search'
import Detail from './detail/Detail'
import moment from 'moment'

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userCode: null,
      tradeNo: null,
      id: null,
      buttonHidden: false,
      params: {
        findtype: '',
        inputValue: '',
        startDate: moment().subtract('days', 90).format('YYYY-MM-DD'),
        endDate: moment().add('days', 0).format('YYYY-MM-DD'),
      },
      activeKey: 'records',
      searchParams: {
        list: [
          {
            name: 'Register Date:',
            type: 'range',
            key: ['startDate', 'endDate'],
            className: 'pr20',
            placeHolder: '',
            values: [
              moment().subtract('days', 90),
              moment().add('days', 0)
            ]
          },
          {
            name: 'apply',
            type: 'select',
            key: 'apply',
            className: 'pr20',
            values: [
              {value: '', name: 'SELECT'},
              {value: 'noAppLication', name: 'No AppLication'},
              {value: 'applied', name: 'applied'}
            ]
          },
          {
            name: 'transfer',
            type: 'select',
            key: 'transfer',
            className: 'pr20',
            values: [
              {value: '', name: 'SELECT'},
              {value: 'haveTransfer', name: 'Have transfer'},
              {value: 'notTransfer', name: 'Not transfer'}
            ]
          },
          {
            name: 'Repay',
            type: 'select',
            key: 'repay',
            className: 'pr20',
            values: [
              {value: '', name: 'SELECT'},
              {value: 'haveToRepay', name: 'Have to Repay'},
              {value: 'noRepay', name: 'no repay'}
            ]
          },
          // {
          //   name: 'Type',
          //   type: 'buttonRadio',
          //   key: 'selectAll',
          //   className: 'pr20',
          //   values: [{value: true, name: 'All'}, {value: false, name: 'Not All'}]
          // },
          {
            name: 'Filter',
            type: 'group',
            key: ['findtype', 'inputValue'],
            className: 'pr20',
            values: [{value: '', name: 'Please Choose'}]
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            values: []
          }
        ],
        api: '/user/find/type/list'
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0
      },
      list: [],
      loading: false
    }
  }

  // componentWillMount() {
  //   this.getData()
  // }

  componentDidMount() {
    // this.getData()
  }

  changeParams(params) {
    // this.setState({
    //   params,
    // })
    console.log(params, 'params')
    if (params.inputValue) {
      if (params.findtype) {
        this.setState({
          params,
        }, () => {
          this.getData()
        })
      } else {
        message.warning('Please choose type first')
      }
    } else {
      this.setState({
        params,
      }, () => {
        this.getData()
      })
    }
  }

  currentPage(current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      },
    }, () => {
      this.getData()
    })
  }

  getData() {
    this.setState({
      loading: true
    })
    fetchPost(`/user/userlist/by/type/v2?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, this.state.params).then(res => {
      if (res.code === 0) {
        if (res.data) {
          let list = res.data.userInfoVOList
          if (list != null && list.length > 0) {
            // let page = json.data.page
            this.setState({
              list: list,
              userCode: list[0].userCode,
              tradeNo: list[0].tradeNo,
              page: {
                ...this.state.page,
                totalCount: res.page.totalCount || 0
              }
            }, () => {
              console.log(this.state.list, 'this.state.list1323')
            })
          } else {
            this.setState({
              list: [],
              userCode: null,
            })
          }
          this.setState({
            loading: false
          })
        } else {
          this.setState({
            list: [],
            userCode: null,
            loading: false
          })
        }
      } else {
        message.error(res.msg)
        this.setState({
          list: [],
          userCode: null,
          loading: false
        })
      }
    })
  }

  changeOrder(params) {
    this.setState({
      userCode: params.userCode,
      tradeNo: params.tradeNo
    })
  }

  changeField(field, value) {
    this.setState({
      [field]: value
    })
  }

  confirmExport = (e) => {
    this.setState({
      buttonHidden: true
    })
    exportFile('/user/trade/list/export', `data-${moment().format('YYYY-MM-DD')}.xlsx`, this.state.params).then(json => {
      this.setState({
        buttonHidden: false
      })
    })
    message.info("Downloading please wait")
  }
  cancelExport = (e) => {
    //message.info("cancel");
  }

  render() {
    return (
      <div>

        <Col span={24} className={`${SearchStyle.searchClass} mb20`}>
          <Search searchParams={this.state.searchParams} changeParams={(params) => this.changeParams(params)}/>
          <Popconfirm title='Are you sure to export the information?' placement='topLeft'
                      onConfirm={this.confirmExport}
                      onCancel={this.cancelExport} okText='OK' cancelText='Cancel'>
            <Button type='primary' size='large' disabled={this.state.buttonHidden}>Export</Button>
          </Popconfirm>
        </Col>

        <Col span={7} className={Styles.listClass}>
          <Spin spinning={this.state.loading}>
            <div>
              <List
                list={this.state.list}
                userCode={this.state.userCode}
                page={this.state.page}
                changeOrder={(params) => this.changeOrder(params)}
                currentPage={(current) => this.currentPage(current)}
              />
            </div>
          </Spin>
        </Col>

        <Col span={17} className={Styles.detailClass}>
          <Detail
            activeKey={this.state.activeKey}
            userCode={this.state.userCode}
            tradeNo={this.state.tradeNo}
            refuse={this.state.refuse}
            changeField={(field, value) => this.changeField(field, value)}/>
        </Col>
      </div>
    )
  }
}

export default Index
